@function px2rem($px){
    @return $px / 100 + rem;
}

* {padding:0px;margin:0px;}
html,body {
    width:100%;
    height: 100%;
    font-size:  100 / (1360 / 100) + vw;// 100 / （设计稿/ 100)  
}
@media screen and (max-width: 750px) {
    html {font-size: 20vw;}
}

.container {
    width: 100%;
    height:100%;
    background: url(../images/echarts/bj1.png);
    background-size: 100% 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    
    .login {
        width: px2rem(300);
        height: px2rem(360);
        background: linear-gradient(230deg, rgba(17, 62, 251, 0.22) 0%, rgb(2, 81, 162) 100%);
        padding: px2rem(40);
        border-radius: px2rem(10);
        text-align:center;

        .logo {width:px2rem(75); height: px2rem(75); }
        h1 {color: #fff;margin: px2rem(20) 0px; font-size: px2rem(30)}

        .uname,.pwd {
            width: px2rem(240);
            height: px2rem(45);
            border: px2rem(1) solid rgba(251, 251, 251, 0.3);
            display: flex;
            align-items:center;
            img {width:px2rem(20);height:px2rem(20);padding:0px px2rem(12);}
            border-radius: px2rem(5);
            margin: auto;
        }

        .uname {margin-bottom: px2rem(20);}

        input {border:none; background: none;color:#fff;}
        input:focus { outline:none;}

        button {
            width: px2rem(240);
            margin-top: px2rem(20);
            outline: none;
            color: #FFFFFF;
            background: #4372da;
            height: px2rem(46);
            border-radius: px2rem(5);
            border-style: none;
            cursor: pointer;
            font-size: px2rem(18);
        }
        button:hover { background: #6391f5;  }
    }
}



// 粒子特效
.particle-network-animation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    // background-color: #171717;
  }
  .particle-network-animation::before {
    z-index: -2;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    opacity: 0.2;
  }
  
  .glow {
    z-index: -1;
    position: fixed;
    top: 50%;
    left: 50%;
    background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.025), transparent);
  }
  
  .glow-1 {
    width: 150vw;
    height: 150vh;
    margin-top: -75vh;
    margin-left: -75vw;
    animation: glow-1-move 25s linear infinite both;
  }
  
  @keyframes glow-1-move {
    from {
      transform: translate(-100%, 100%);
    }
    to {
      transform: translate(100%, -100%);
    }
  }
  .glow-2 {
    width: 100vw;
    height: 100vh;
    margin-top: -50vh;
    margin-left: -50vw;
    animation: glow-2-move 25s linear 8.3333333333s infinite both;
  }
  
  @keyframes glow-2-move {
    from {
      transform: translate(-100%, 0%);
    }
    to {
      transform: translate(100%, 100%);
    }
  }
  .glow-3 {
    width: 120vw;
    height: 120vh;
    margin-top: -60vh;
    margin-left: -60vw;
    animation: glow-3-move 25s linear 16.6666666667s infinite both;
  }
  
  @keyframes glow-3-move {
    from {
      transform: translate(100%, 100%);
    }
    to {
      transform: translate(0%, -100%);
    }
  }
  